<!-- 人员信息 -->
<template>
  <div class="container">
    <div class="query-container">
      <div class="query-criteria">
        <el-input v-model="username" placeholder="姓名" class="input"></el-input>
        <el-input v-model="workUnit" placeholder="工作单位" class="input"></el-input>
        <el-input v-model="title" placeholder="试卷名称" class="input"></el-input>
        <el-cascader clearable placeholder="请选择区县" v-model="areaName" :options="Eoptions" :props="optionProps"
          @change="handleChangeform" style="width: 100%; margin-right: 20px">
        </el-cascader>
        <el-date-picker type="datetimerange" placeholder="选择日期" align="center" v-model="datetime" start-placeholder="考试开始日期"
          end-placeholder="考试结束日期" style="width: 160%">
        </el-date-picker>
      </div>
    </div>
    <div class="query-button" style="margin-bottom: 20px;">
      <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
      <el-button @click="reset" style="margin: 0px 20px">重置</el-button>
      <el-button @click="exportExcel">导出数据</el-button>
    </div>
    <div>
      <div class="table-container">
        <el-table :data="displayedDataWithIndex" border style="width: 100%" :header-cell-style="{
          background: '#f0f7fe',
          color: '#467ee1',
          fontSize: '16px',
        }" :default-sort="{ prop: 'score', order: 'descending' }" @sort-change="changeTableSort">
          <el-table-column label="序号" align="center" width="60%">
            <template slot-scope="{ $index }">
              {{ startIndex + $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="username" label="姓名" align="center" width="90%"></el-table-column>
          <el-table-column prop="titile" label="试卷名称" align="center"></el-table-column>
          <el-table-column prop="unit" label="工作单位" align="center"></el-table-column>
          <el-table-column prop="phone" label="电话" align="center"></el-table-column>
          <el-table-column prop="areaName" label="所属区县" align="center"></el-table-column>
          <el-table-column prop="startTime" label="考试时间" align="center" :formatter="formatDate"></el-table-column>
          <el-table-column prop="endTime" label="交卷时间" align="center" :formatter="formatDate"></el-table-column>
          <el-table-column prop="major" label="参考专业" align="center"></el-table-column>
          <el-table-column prop="useTime" label="耗时" sortable="custom" align="center"></el-table-column>
          <el-table-column prop="socre" label="得分" sortable="custom" align="center"></el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="totalItems"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getExaminerInformation, exportExaminerInfo } from "@/api/statistics"; // 引入获取考试人员接口
import { getarea } from "@/api/QRcode";
import { formatDate, FormatTime } from "@/utls/format";

export default {
  data() {
    return {
      workUnit: "",
      username: "",
      title: "",
      areaName: "",
      datetime: "",
      Eoptions: [], //区县
      optionProps: {
        value: "id",
        label: "areaName",
        children: "children",
        checkStrictly: true,
      },
      formatDate, //格式化时间
      tableData: [],
      displayedData: [], // 当前页显示的数据
      currentPage: 1, // 当前是第几页
      pageSize: 10, // 每页显示的数据条数
      totalItems: 0, // 总数据条数
      startIndex: 0, //当前页数据的起始索引
      useTimeSort: null,
      socreSort: null,
    };
  },
  computed: {
    displayedDataWithIndex() {
      return this.displayedData;
    },
  },
  mounted() {
    this.handleCurrentChange(this.currentPage);

    //获取区县详情
    getarea(0).then((res) => {
      this.Eoptions = res.data.data;
    });
  },
  methods: {
    handleChangeform(val) {
      if (val) this.areaName = val[val.length - 1];
    },

    //搜索
    async search() {
      const date = this.datetime === null ? " " : this.datetime;
      let formatTime1 =
        FormatTime("yyyy-MM-dd hh:mm:ss", date[0]) === "NaN-aN-aN aN:aN:aN"
          ? undefined
          : FormatTime("yyyy-MM-dd hh:mm:ss", date[0]);
      let formatTime2 =
        FormatTime("yyyy-MM-dd hh:mm:ss", date[1]) === "NaN-aN-aN aN:aN:aN"
          ? undefined
          : FormatTime("yyyy-MM-dd hh:mm:ss", date[1]);
      let res = await getExaminerInformation({
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        username: this.username,
        unit: this.workUnit,
        areaId: this.areaName,
        title: this.title,
        startTime: formatTime1,
        endTime: formatTime2,
      });
      this.displayedData = res.data.data.userInfos;
      this.totalItems = res.data.data.total;
      this.handleCurrentChange(1);
    },
    //重置
    async reset() {
      this.workUnit = "";
      this.username = "";
      this.areaName = "";
      this.title = "";
      this.datetime = "";
      this.handleCurrentChange(1);
    },

    //导出数据
    async exportExcel() {
      const res = await exportExaminerInfo({
        username: this.username,
        workUnit: this.workUnit,
        areaId: this.areaName,
        title: this.title,
        startTime: FormatTime("yyyy-MM-dd hh:mm:ss", this.datetime[0]),
        endTime: FormatTime("yyyy-MM-dd hh:mm:ss", this.datetime[1]),
      });
      let content = res.data;
      let data = new Blob([content], {
        type: "application/vnd.ms-excel",
      });
      let downloadUrl = window.URL.createObjectURL(data);
      var a = document.createElement("a");
      document.body.appendChild(a);
      a.href = downloadUrl;
      a.download = "考试人员信息";
      a.click();
      window.URL.revokeObjectURL(downloadUrl);
    },

    //调用接口获取数据
    async getAllExaminer() {
      let res = await getExaminerInformation({
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        useTimeSort: this.useTimeSort,
        socreSort: this.socreSort,
        majorId:localStorage.getItem('major')
      });
      this.tableData = res.data.data.userInfos;
      this.totalItems = res.data.data.total;
    },

    //更改表格展示条数
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getAllExaminer();
      this.handleCurrentChange(this.currentPage);
    },

    //切换表格第几页,每次切换页面重新发起请求获取数据
    async handleCurrentChange(newPage) {
      this.currentPage = newPage;
      let res = await getExaminerInformation({
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        useTimeSort: this.useTimeSort,
        socreSort: this.socreSort,
        username: this.username,
        unit: this.workUnit,
        areaId: this.areaName,
        title: this.title,
        majorId:localStorage.getItem('major'),
        startTime: FormatTime("yyyy-MM-dd hh:mm:ss", this.datetime[0]),
        endTime: FormatTime("yyyy-MM-dd hh:mm:ss", this.datetime[1]),
      });
      this.tableData = res.data.data.userInfos;
      this.totalItems = res.data.data.total;
      this.startIndex = (newPage - 1) * this.pageSize;
      //页面展示数据
      this.displayedData = this.tableData.map((row, index) => {
        return {
          ...row,
          index: this.startIndex + index + 1,
        };
      });
      this.$parent.$parent.$parent.scrollToTop()
    },
    //排序
    async changeTableSort(column) {
      if (column.prop === "useTime") {
        this.useTimeSort = column.order === "ascending" ? 0 : 1;
        this.socreSort = null;
      } else if (column.prop === "socre") {
        this.socreSort = column.order === "ascending" ? 0 : 1;
        this.useTimeSort = null;
      } else {
        this.useTimeSort = null;
        this.socreSort = 1;
      }
      await this.handleCurrentChange(this.currentPage);
    },
  },
};
</script>

<style scoped lang="scss">
.query-container {
  display: flex;
  margin: 20px 0;
}

.query-criteria {
  display: flex;

  .input {
    width: 100%;
    margin-right: 20px;
  }
}



.pagination {
  margin-top: 25px;
}

:deep(.el-pager li.active) {
  color: #ffffff;
  background-color: #409eff;
}

:deep(.el-pager li:hover) {
  color: #787d83;
}

.el-pagination {
  margin: 25px 0;
  display: flex;
  flex-wrap: wrap;
}
</style>